<template>
    <article class="sign_in register_wrap">
        <div class="warp">
            <el-row>
                <el-col>
                    <el-form :model="form" ref="form" label-width="80px" class="form">
                        <h1>注册</h1>

                        <el-form-item label="账号" prop="username">
                            <el-input type="text" v-model="form.username" placeholder="账号">
                            </el-input>
                        </el-form-item>

                        <el-form-item label="密码" prop="password">
                            <el-input type="password" v-model="form.password" placeholder="5 到 16 个字符" autocomplete="off">
                            </el-input>
                        </el-form-item>

                        <el-form-item label="确认密码" prop="confirm_password">
                            <el-input type="password" v-model="confirm_password" placeholder="5 到 16 个字符"
                                autocomplete="off">
                            </el-input>
                        </el-form-item>

                        <el-form-item label="昵称" prop="nickname">
                            <el-input type="text" v-model="form.nickname" placeholder="昵称">
                            </el-input>
                        </el-form-item>

                        <el-form-item label="邮箱" prop="email">
                            <el-input type="email" v-model="form.email" placeholder="例：test@test.com!">
                            </el-input>
                        </el-form-item>

                        <el-form-item label="手机号" prop="phone">
                            <el-input type="phone" v-model="form.phone" placeholder="例: 18955552312">
                            </el-input>
                        </el-form-item>

                        <el-form-item label="身份" prop="user_group">
                            <el-select v-model="form.user_group" placeholder="身份">
                                <el-option v-for="userGroup in list_user_group" :key="userGroup.group_id"
                                    :value="userGroup.name" :label="userGroup.name"></el-option>
                            </el-select>
                        </el-form-item>


                        <el-button type="primary" @click="submit_check(form)">注册</el-button>
                        <router-link class="el-button el-button--primary" to="./login">返回</router-link>

                    </el-form>
                </el-col>
            </el-row>
        </div>
    </article>
</template>

<script>
import axios from 'axios';
export default {

    data: function () {
        return {
            form: {
                username: "ok123",
                password: "ok123",
                nickname: "ok123",
                email: "ok123@qq.com",
                phone: "13688994430",
                user_group: ""
            },
            confirm_password: "ok123",
            list_user_group: [],
            checkResult: true
        }
    },
    methods: {
        async registerUser(param) {
            let that = this;
            await axios.post('http://127.0.0.1:5000/api/user/register', {
                username: param.username,
                password: param.password,
                nickname: param.nickname,
                user_group: param.user_group,
                email: param.email,
                phone: param.phone
            })
                .then(function (response) {
                    console.log(response.data);
                    that.$message.success("注册成功");
                    that.$router.push({ path: '/login' }, () => { }, () => { });
                })
                .catch(function (error) {
                    console.log(error);
                })
                .then(function () {
                    // 总是会执行
                })
        },
        async registerEnterprise(param) {
            let that = this;
            await axios.post('http://127.0.0.1:5000/api/user/register', {
                username: param.username,
                password: param.password,
                nickname: param.nickname,
                user_group: param.user_group,
                email: param.email,
                phone: param.phone
            })
                .then(function (response) {
                    console.log(response.data);
                    that.$message.success("注册成功");
                    that.$router.push({ path: '/login' }, () => { }, () => { });
                })
                .catch(function (error) {
                    console.log(error);
                })
                .then(function () {
                    // 总是会执行
                })
        },
        async checkEnterprise(enterprise_number) {
            let that = this;
            await axios.get("http://127.0.0.1:5000/api/school_recruitment_enterprise/get_obj",
                {
                    params:
                    {
                        enterprise_number: enterprise_number,
                    }
                })
                .then(function (response) {
                    console.log("checkEnterprise");
                    if (!response.data.result.obj) {
                        that.checkResult = false;
                        that.$message.error('企业编号已存在!');
                    }
                })
                .catch(function (error) {
                    console.log(error);
                })
                .then(function () {
                    // 总是会执行
                })
        },
        async checkUser(username) {
            let that = this;
            await axios.get("http://127.0.0.1:5000/api/user/get_obj",
                {
                    params: {
                        username: username
                    }
                })
                .then(function (response) {
                    console.log(response.data);
                    if (!response.data.result.obj) {
                        that.checkResult = false;
                        that.$message.error("用户已存在");
                    }
                })
                .catch(function (error) {
                    console.log(error);
                })
                .then(function () {
                    // 总是会执行
                })
        },
        /**
         * 提交前校验
         * @param {Object} param
         */
        submit_check(param) {
            var email_regular = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
            var phone_regular = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;

            var { username, password, nickname, user_group, email, phone } = param;

            var confirm_password = this.confirm_password;

            console.log("表单校验username ,password ,email ,nickname ,user_group", username, password, email, nickname, user_group);

            if (username === null) {
                this.$message.error('账号不能为空');
                return;
            }
            else if (username.length > 16 || username.length < 5) {
                this.$message.error('账号长度应为5到16个字符之间');
                return;
            }
            else if (password === null) {
                this.$message.error('密码不能为空');
                return;
            }
            else if (password.length > 16 || password.length < 5) {
                this.$message.error('密码长度应为5到16个字符之间！');
                return;
            }
            else if (nickname && nickname.length > 12 || nickname.length < 2) {
                this.$message.error('昵称长度应为2个字符到12个字符之间');
                return;
            }
            else if (email === undefined || !email_regular.test(email)) {
                this.$message.error('请输入正确的邮箱地址 例：test@test.com!');
                return;
            }
            else if (phone === undefined || !phone_regular.test(phone)) {
                this.$message.error('请输入正确的手机号码 例：18955552312!');
                return;
            }
            else if (password != confirm_password) {
                this.$message.error('确认密码与密码不一致！');
                return;
            }
            else if (!user_group) {
                this.$message.error('请选择用户组!');
                return;
            }

            if (user_group === "求职者") {
                this.checkUser(param.username);
                if (this.checkResult === false) {
                    return;
                }
                this.registerUser(param);
            }
            if (user_group === "企业") {
                this.checkEnterprise(param.username);
                if (this.checkResult === false) {
                    return;
                }
                this.registerEnterprise(param);
            }
            console.log("注册");
        },
    },
    created: function () {
        let that = this;
        axios.get("http://127.0.0.1:5000/api/user_group/get_list", {
            params: {
                register_max: 3,
                register_min: 2
            }
        })
            .then(function (response) {
                console.log(response.data.result);
                that.list_user_group = response.data.result.list;
            })
            .catch(function (error) {
                console.log(error);
            })
            .then(function () {
                // 总是会执行
            })
    },

}
</script>

<style>
.sign_in {
    box-sizing: border-box;
    height: 100vh;
    padding: .5rem;
    width: 100%;
    background: url("@/assets/background.jpg") no-repeat;
    background-size: 100% 100%;
    color: #fff;
}

.sign_in h1,
.sign_in .btns {
    text-align: center;
}

.sign_in .btns .el-button {
    width: 40%;
}

.sign_in .el-form-item__label {
    color: #fff;
}

.sign_in .form {
    box-sizing: border-box;
    padding: 1rem 3rem;
    margin: auto;
    margin-top: 13rem;
    width: 100%;
    max-width: 25rem;
    box-shadow: 0 0 0 1px hsla(240, 0%, 100%, .3) inset,
        0 .5em 1em rgba(50, 50, 50, 0.6);
    text-shadow: 0 1px 1px hsla(240, 0%, 100%, .5);
    overflow: hidden;
    /* background-color: rgba(255, 255, 255, .5); */
    border-radius: 0.5rem;
}

.sign_in .form:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: -1;

    background-image: url("@/assets/background.jpg");
    background-position: center top;
    background-size: cover;
    background-attachment: fixed;
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -ms-filter: blur(20px);
    -o-filter: blur(20px);
    filter: blur(20px);
}
</style>
